<template>
  <div class="navMenuBox">
    <el-row>
      <el-col
        :span="4"
        class="nav"
      >
        <div class="navMenuTitle">
          <img
            src="../../assets/G&T.png"
            alt="图片走丢了"
            width="100%"
            height="100%"
          />
        </div>
        <div class="grid-content bg-purple">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <router-link to="/home">
              <el-menu-item
                index="1"
                class="bg"
              >
                <i class="el-icon-s-home"></i>
                <span slot="title">首页</span>
              </el-menu-item>
            </router-link>
            <router-link to="/sales/salesDetail">
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">销量一览</span>
              </el-menu-item>
            </router-link>
            <!-- <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-dish"></i>
                <span>菜系管理</span>
              </template>
              <el-menu-item-group>
                <router-link to="/cuisine/cuisineList">
                  <el-menu-item
                    class="bg2"
                    index="3-1"
                  >
                    <i class="iconfont  iconcaipinguanli"></i>
                    菜品管理
                  </el-menu-item>
                </router-link>
                <router-link to="/cuisine/settlement"> 
                                    <el-menu-item class="bg2" index="3-2" >
                                        <i class="iconfont  iconjiesuan"></i>
                                        结算
                                    </el-menu-item>
                                </router-link>
              </el-menu-item-group>
            </el-submenu> -->
            <router-link to="/cuisine/cuisineList">
              <el-menu-item index="3">
                <i class="el-icon-dish"></i>
                <span slot="title">菜品管理</span>
              </el-menu-item>
            </router-link>
            <router-link to="/customer/customerList">
              <el-menu-item index="4">
                <i class="el-icon-user"></i>
                <span slot="title">顾客管理</span>
              </el-menu-item>
            </router-link>
            <router-link to="/order/orderList">
              <el-menu-item index="5">
                <i class="el-icon-s-order"></i>
                <span slot="title">订单管理</span>
              </el-menu-item>
            </router-link>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>员工管理</span>
              </template>
              <el-menu-item-group>
                <router-link to="/staff/official">
                  <i class=""></i>
                  <el-menu-item
                    class="bg2"
                    index="6-1"
                  >
                    <i class="iconfont  iconzhengshiyuangong"></i>
                    正式员工管理
                  </el-menu-item>
                </router-link>
                <router-link to="/staff/temporary">
                  <el-menu-item
                    class="bg2"
                    index="6-2"
                  >
                    <i class="iconfont  iconfeizhengshiyuangongzhuanzheng"></i>
                    临时员工管理
                  </el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-submenu>
            <router-link to="/examine/examineCenter">
              <el-menu-item index="7">
                <i class="el-icon-s-claim"></i>
                <span slot="title">审核中心</span>
              </el-menu-item>
            </router-link>
          </el-menu>
        </div>
      </el-col>
      <el-col
        :span="20"
        id="content"
      >
        <div class="grid-content bg-purple-light">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name: 'navMenu'
}
</script>

<style scoped>
.nav {
  position: fixed;
  /* height: 100%; */
}
.navMenuTitle {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #99cccc;
}
#content {
  margin-left: 16.67%;
}
.grid-content {
  height: 100vh;
}
/* .bg-purple-light{
    background-color: #f4f4f8;
} */
.el-menu-vertical-demo {
  background-color: teal;
  width: 100%;
  height: 100%;
}
/* 改变鼠标移入时候的背景颜色 */
.el-menu-item:hover {
  background: rgb(1, 75, 75) !important;
}
.el-submenu :hover {
  background: rgb(1, 75, 75) !important;
}
/* 二级菜单栏的背景颜色 */
.bg2 {
  background-color: rgb(10, 165, 165) !important;
  padding-left: 50px !important;
}
</style>
<style>
a {
  text-decoration: none;
}
/* 二级菜单栏的图标的颜色 */
.el-submenu__title i {
  color: #ffffff !important;
}
.el-menu-item-group__title {
  padding: 0 0 0 40px !important;
}
/* 菜单栏的图标的颜色 */
.el-menu-item i {
  color: #ffffff;
}
/* .el-col-20{
    height: 100vh;
} */
</style>

